<template>
    <div>
      <Head></Head>
      <el-container  style="height: 564px;">
  
        <el-aside  width="200px" style="background-color: rgb(238, 241, 246)">
  
          <el-menu background-color="rgba(240, 240, 240)" unique-opened router text-color="#000"
          active-text-color="#409eff"  :default-active="activePath">
  
            <el-submenu :index="item.id" v-for="item in list" :key="item.id" >
              <template slot="title"><i :class="item.ico"></i>{{item.name}}</template>
                <el-menu-item :index="'/' + subitem.path" v-for="subitem in item.children" :key="subitem.id" @click="saveNavstate('/' + subitem.path)" >
                  <template slot="title"><i :class="subitem.ico"></i>{{subitem.name}}</template>
                </el-menu-item>
            </el-submenu>
  
          </el-menu>
        </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        
      </el-container>
    </div>
  </template>
  
  <script>
    import Head from '../components/Head.vue'
    
    export default {
      components: {Head},
      data() {
        return {
          list: [
            {
              id: '1',
              name: '设备管理',
              ico: 'el-icon-s-cooperation',
              children: [{
                id: '1-1',
                name: '设备信息',
                ico: 'el-icon-menu',
                path: 'user/buy'
              }]
            },
            {
              id: '2',
              name: '设备维修',
              ico: 'el-icon-s-release',
              children: [{
                id: '2-1',
                name: '维修记录',
                ico: 'el-icon-menu',
                path: 'user/wxiu'
              }]
            },
            {
              id: '3',
              name: '设备报废',
              ico: 'el-icon-delete-solid',
              children: [{
                id: '3-1',
                name: '报废记录',
                ico: 'el-icon-menu',
                path: 'user/bfei'
              }]
            },
            {
              id: '4',
              name: '用户信息修改',
              ico: 'el-icon-edit',
              children: [{
                id: '4-1',
                name: '修改信息',
                ico: 'el-icon-menu',
                path: 'user/pwchange'
              }]
            }
          ],
          
          activePath: ''
        }
      },
      created() {
        this.activePath = window.sessionStorage.getItem('activePath')
        
      },
      methods: {
        saveNavstate(activePath) {
          window.sessionStorage.setItem('activePath', activePath)
          this.activePath =activePath
        }
      }
      
    }
  </script>
  
  <style scoped>
  .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;
    }
  
    
  </style>